﻿<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8"/>
    <title>小蜜蜂连接池监控</title>
    <link href="css/monitor.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div align="right"><a href="english.html">English</a>|<a href="chinese.html">中文</a></div>
<!-- tab栏 -->
<ul id="tabs">
    <li class="current"><a href="#" rel="external nofollow" title="tab1">数据源列表</a></li>
    <li><a href="#" rel="external nofollow" title="tab2">SQL列表</a></li>
</ul>
<!-- 对应显示内容 -->
<div id="content">
    <div class="item show" id="tab1">
        <table class="tablesorter" id="ds_monitorTable">
            <thead>
            <tr>
                <th>数据源</th>
                <th>模式</th>
                <th>状态</th>
                <th>最大连接</th>
                <th>闲置连接</th>
                <th>使用中连接</th>
                <th>信号等待数</th>
                <th>传递等待数</th>
                <th>连接创建中</th>
                <th>创建已超时</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <p></p>
        <div align="center">
            <input id="ds_refresh_button" type="button" value="刷新"/>
            <input id="ds_timer_button" type="button" value="启动定时"/>
            <select id="ds_refresh_interval">
                <option selected value="10000">10s</option>
                <option value="20000">20s</option>
                <option value="30000">30s</option>
                <option value="40000">40s</option>
            </select>
            <p></p>
        </div>
    </div>
    <div class="item" id="tab2">
        <table class="tablesorter" id="sql_monitorTable">
            <thead>
            <tr>
                <th>SQL</th>
                <th width="100px">数据源</th>
                <th width="150px">开始时间</th>
                <th width="150px">结束时间</th>
                <th width="100px">耗时(毫秒)</th>
                <th width="100px">执行异常</th>
                <th width="200px">执行方法</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <p></p>
        <div align="center">
            <input id="sql_refresh_button" type="button" value="刷新"/>
            <input disabled="disabled" id="sql_first" type="button" value="首页"/>
            <input disabled="disabled" id="sql_pre" type="button" value="上一页"/>
            <input disabled="disabled" id="sql_next" type="button" value="下一页"/>
            <input disabled="disabled" id="sql_last" type="button" value="末页"/>
            <select id="page-size">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
            </select>
            sql-size:
            <input align="right" disabled="disabled" id="total_sql" size="3" type="text" value="0"/>
            <input disabled="disabled" size="3" style="background-color:#CCFF66" type="text" value="缓慢"/>
            <input disabled="disabled" size="3" style="background-color:#FFCC00" type="text" value="错误"/>
            <input id="sql_timer_button" type="button" value="启动定时"/>
            <select id="sql_refresh_interval">
                <option selected value="10000">10s</option>
                <option value="20000">20s</option>
                <option value="30000">30s</option>
                <option value="40000">40s</option>
            </select>
            <p></p>
        </div>
    </div>
</div>

<script src="js/jQuery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="js/monitor.js" type="text/javascript"></script>
</body>
</html>